<template>
  <div class="login-register-container zoom-out-animation">
    <!-- 左侧内容容器 -->
    <div class="left-side">
      <!-- 这里放置左侧的图片或内容 -->
      <!-- <img src="image.png" alt="左侧背景图" class="background-image"> -->
      <img src="@/assets/images/pop.png" alt="左侧背景图" class="sphere s-other-animtion" />
      <!-- <div class="left-title">知识库-dev</div> -->
      <home :showLogo="false"></home>
    </div>
    <!-- 右侧卡片容器 -->
    <div class="right-side">
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>{{ currentMode.title }}</span>
          </div>
        </template>
        <component :is="currentComponent" @toggle-mode="handleToggleMode"></component>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

import Home from '@/views/index/indexHome/index.vue';

import Login from './components/Login.vue';
import Register from './components/Register.vue';
import ForgetPassword from './components/ForgetPassword.vue';

// 组件映射对象
const components = {
  login: Login,
  register: Register,
  forgetPassword: ForgetPassword
};

// 定义模式键数组
const modeKeys = ['login', 'register', 'forgetPassword'];
// 当前模式键，默认设置为'login'
const currentModeKey = ref('login');
// 计算属性：根据当前模式键获取对应的组件
const currentComponent = computed(() => components[currentModeKey.value]);

// 计算属性：返回当前模式下的标题和切换文本
const currentMode = computed(() => {
  const modes = {
    login: {
      title: '用户登录',
      toggleText: '去注册'
    },
    register: {
      title: '用户注册',
      toggleText: '已有账号？去登录'
    },
    forgetPassword: {
      title: '找回密码',
      toggleText: '返回登录'
    }
  };
  return modes[currentModeKey.value];
});

// 切换模式的方法
const toggleMode = (mode) => {
  console.log(`切换到 ${mode}`); // 添加日志输出
  currentModeKey.value = mode;
};

// 处理组件发出的切换模式事件
const handleToggleMode = (mode) => {
  console.log(`切换到 ${mode}`); // 添加日志输出
  currentModeKey.value = mode;
};
</script>

<style scoped>



.login-register-container {
  display: flex;
  height: 100vh;
  background-image: url('@/assets/images/bg.jpg'), linear-gradient(to right, #dcdfed, #feb47b);
  /* background-image: url('background-pattern.png'), linear-gradient(to right, #3a58db, #feb47b); */
  background-repeat: no-repeat;
  background-size: cover;
  /* background-attachment: fixed;
  background-position: right bottom; */
  
}

.left-title{
  font-size: 30px;
  font-family: "黑体";
  font-weight: bold;
  color: #3763a0;
}

.left-side {
  /* 根据需求调整宽度 */
  width: 50%;
  margin-left: 20px;
  /* 确保左侧内容居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.right-side {
  /* 根据需求调整宽度 */
  width: 50%;
  /* 确保右侧卡片垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.box-card {
  width: 90%;
  max-width: 400px;
  padding: 20px;
}

.card-header {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.background-image {
  /* 根据需要调整图片尺寸 */
  width: 100%;
  height: auto;
}

.zoom-out-animation {
  animation: zoomOut 3s ease-in-out ;
  /* animation: moveBackground 20s linear infinite; */
}


@keyframes zoomOut {
  0% {
    background-size: 120%;
  }
  50% {
    background-size: 110%;
  }
  100% {
    background-size: 100%;
  }
}

.sphere {
  position: absolute;
  left: 40%;
  width: 200px;
  opacity: 0.6;
  z-index: 1;
  animation: sphereAnimation 3s ease forwards;
}

/deep/ .desc {
  color: #24272a;
}


@keyframes sphereAnimation {
  0% {
    width: 200px;
    transform: translateY(100%);
  }
  100% {
    width: 100px;
    transform: translateY(-100%);
  }
}


/* .sphere {
  position: absolute;
  left: 40%;
  width: 20px;
  opacity: 0.6;
  z-index: 1;
  animation: sphereAnimation 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
}

.s-animtion {
  animation: sphereAnimation 2s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;
} */

/* @keyframes sphereAnimation {
  0% {
    width: 10%;
  }
  100% {
    width: 30%;
    transform: translate(-30%, 5%);
  }
} */

</style>